<template>
    <div>
      <div class="header block">
        <div class="row">
          <div class="search">
            <input
              type="text"
              placeholder="请输入单位名称"
              class="input search-input"
              v-model="searchText"
              @keydown.enter="search"
            />
            <button class="btn" @click="search">搜索</button>
            <button class="btn-white" @click="onReset">重置</button>
          </div>
          <div>
            <button class="btn" style="width:128px" @click="centerDialogVisible=true">添加被派遣单位</button>
          </div>
        </div>
      </div>
      <div class="container block block-alone">
        <el-tabs model-value="detail">
          <div class="table">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-row-style="{ color: '#202536' }"
              :row-style="{ color: '#5E617D' }"
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column type="index" label="序号" /> -->
              <el-table-column
                prop="serveCompanyName"
                label="被派遣单位"
                width="200px"
              />
              <el-table-column label="可用工种">
                <template #default="scope">
                  <p v-for="(item,index) in scope.row.occupationList" v-bind:key="index">
                    {{ item.name }} {{ '(' + item.level + '类' + ')' }}
                  </p>
                </template>
              </el-table-column>
              <!-- <el-table-column label="视频">
                <template #default="scope">
                  <p
                    style="color:#1989FA"
                    class="point"
                  >
                    <a v-if="scope.row.fileDetail" class="left-video-a" style="color:#1989FA;text-decoration:none;"
                       target="_blank" :href="scope.row.fileDetail">点击查看</a>
                    {{ !scope.row.fileDetail ? '暂无视频' : '' }}
                  </p>
                </template>
              </el-table-column> -->
              <el-table-column label="视频">
                <template #default="scope">
                  <div>
                      <p v-if="scope.row.fileDetailList && scope.row.fileDetailList[0] !== ''" style="color:#1989FA" class="point" @click="onFileDetail(scope.row.fileDetailList)">点击查看</p>
                      <p class="">{{ scope.row.fileDetailList && scope.row.fileDetailList[0] === '' ? '暂无视频' : '' }}</p>
                  </div>

                </template>
              </el-table-column>
              <el-table-column
                width="240px"
                prop="createTime"
                label="添加时间"
              />
              <el-table-column label="状态">
                <template #default="scope">
                  <div class="decorate-box">
                    <div class="decorate"
                         :style="{background:scope.row.status == 0 ? '#FFC53D' : scope.row.status == 1 ? '#00D679' : '#FF7E68'}"></div>
                    <!--  style="color:#1989FA" -->
                    <p>
                      {{
                        scope.row.status == 0 ? '待审核' : scope.row.status == 1 ? '已通过' : scope.row.status == 2 ? '驳回' : scope.row.status == 3 ? '拒保' : ''
                      }}
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <p
                    v-if="!scope.row.status"
                    style="color:#1989FA"
                    class="point"
                    @click="
                                          cancelDispatchExamine(scope.row.id)
                                      "
                  >
                    取消
                  </p>
                  <p
                    v-if="scope.row.status"
                    style="color:#FF7E68"
                    class="point"
                    @click="
                                          deleteDispatchExamine(scope.row.id)
                                      "
                  >
                    删除
                  </p>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination"
              v-model:currentPage="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getPayrollList"
            >
            </el-pagination>
          </div>
        </el-tabs>
        <batchPayroll
          v-if="isBatchPay"
          @close="isBatchPay = false"
          @complete="getPayrollList"
          isType="payroll"
        />
      </div>
      <el-dialog
        v-model="centerDialogVisible"
        title="新增被派遣单位"
        width="642px"
        destroy-on-close
        center
      >
        <div class="row">
          <div class="name">
            <span class="important" style="opacity: -0.9">*</span>
            上传视频
          </div>
          <div class="upload-box" style="width:100%">
            <el-upload
              class="upload-demo"
              :action="uploadAction"
              :headers="{Authorization}"
              :on-success="fileSuccess"
              :on-error="fileEerror"
              :show-file-list='false'
              :before-upload="fileBeforeUpload"
              accept="image/jpeg,image/image/png,video/*"
            >
              <button class="btn-white-blue" style="width:130px;background:#1989FA;color:#fff;" >
                <i class="el-icon el-icon-camera"/>选择视频文件
              </button>
            </el-upload>
            <div class="upload-introduce">
              视频时间10s-60s 视频大小不超50M
            </div>
          </div>
        </div>
        <div class="row">
          <div class="name">
            <span class="important">*</span>
            被派遣单位
          </div>
          <div style="width:100%">
            <!-- <el-input placeholder="请输入" style="width:240px" @blur="blurConfirmCode" v-model="dispatchUnit"/> -->
            <el-select v-model="companyId" filterable placeholder="请选择派遣单位">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.serveCompanyName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="dialog-btn-box">
          <button class="btn-white" @click="centerDialogVisible=false" style="marginRight:20px">取消</button>
          <button class="btn" @click="addDispatchUnit" style="marginLength:20px">提交审核</button>
        </div>
      </el-dialog>
      <!--  -->
      <alertBox :data-title="(videoIndex + 1) + '/' + videoList.length" v-if="videoList.length" :isCloseType="true" @close="onVideoCallback">
          <div class="alert-box">
              <div class="video-box">
                  <div > <i style="font-size:50px" class="el-icon el-icon-arrow-left" @click="onVideoUpper" /> </div>
                  <div class="video-list">
                      <div v-for="(item,index) in videoList" v-bind:key="index" >
                          <!-- video -->
                          <!-- height="500"  -->
                          <video class="video"  :src="item" preload controls  v-if="videoIndex === index" ></video>
                      </div>
                  </div>
                  <div><i style="font-size:50px" class="el-icon el-icon-arrow-right" @click="onVideoNext" /> </div>
              </div>
          </div>
      </alertBox>
    </div>
  </template>

<script lang="ts">
import global from '@/utils/global'
import { defineComponent } from 'vue'
import {
    getDispatchList,
    cancelDispatchExamine,
    deleteDispatchExamine,
    addDispatch,
    getCompanyList
} from '@/api/long-insure'
import { BillDetailDto, BillDto } from '@/api/bill'
import { getPayrollList } from '@/api/payroll'
import batchPayroll from '@/components/batch-payroll.vue'
import alertBox from '@/components/alert-box.vue'
export default defineComponent({
    name: 'InsureDispatch',
    components: {
        batchPayroll,
        alertBox
    },
    data () {
        return {
            Authorization: 'Bearer' + ' ' + global.token,
            uploadAction:
          process.env.VUE_APP_BASE_URL +
          '/rest/period-insur/serve-company/upload', // 上传路径
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            centerDialogVisible: false, // 弹窗
            fileSize: '',
            fileUrl: '',
            isfileLengt: true,
            dispatchUnit: '', // 派遣单位
            companyList: [] as any, // 所有单位
            companyId: '', // 选择的单位id
            videoList: [] as string[],
            videoIndex: 0
        }
    },
    created () {
        this.getPayrollList()
        this.getCompanyList()
    },
    methods: {
        // 获取所有单位列表
        async getCompanyList () {
            const result = await getCompanyList()
            console.log(result, 'result获取所有单位列表')
            this.companyList = result.list
        },
        // 取消 派遣段位 审核
        async cancelDispatchExamine (id: string) {
            const result = await cancelDispatchExamine({ id: id })
            await this.getPayrollList()
            this.$message.success('取消成功！')
        },
        // 删除派遣单位
        async deleteDispatchExamine (id: string) {
            console.log(id, 'id')
            const result = await deleteDispatchExamine({ id: id })
            await this.getPayrollList()
            this.$message.success('删除成功！')
        },
        async getPayrollList () {
            const result = await getDispatchList({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                isGetFile: 1,
                searchText: this.searchValue
            })
            this.total = result.total
            this.tableData = result.list
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getPayrollList()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        async fileBeforeUpload (file: any) {
            var url = URL.createObjectURL(file)
            var audioElement = new Audio(url)
            var duration = parseInt(audioElement.duration + '')
            audioElement.addEventListener('loadedmetadata', () => {
                console.log(parseInt(audioElement.duration + ''), '时长为秒，取整')// 时长为秒，取整
                const fileLength = parseInt(audioElement.duration + '')
                if (fileLength < 10 && fileLength > 60) {
                    this.$message.error('视频不可小于10秒或大于60秒')
                    this.isfileLengt = false
                    return
                }
                if ((file.size / 1024 / 1024) > 100) {
                    this.$message.error('视频不可大于100mb')
                    this.isfileLengt = false
                }
            })
        },
        fileSuccess (response: { code: number, msg: string, data: { fileSize: string, fileUrl: string } }, file: { raw: { name: string, type: string } }) {
            console.log(file.raw, 'file.raw')
            if (response.code === 500) {
                this.$message.error(response.msg)
                return
            }
            if (file.raw.type !== 'video/mp4') {
                this.$message.error('请上传视频')
                return
            }
            // if (!this.isfileLengt) {
            //     this.$message.error('视频不可小于10秒或大于100秒')
            //     return
            // }
            this.fileSize = response.data.fileSize
            this.fileUrl = response.data.fileUrl
            console.log(file, 'file', file.raw.type)
            this.$message.success('上传成功')
        },
        fileEerror () {
            this.$message.error('文件上传失败')
        },
        // 被派遣单位
        async addDispatchUnit () {
            console.log('添加派遣单位')
            console.log(this.companyId, 'companyId')
            if (!this.fileUrl) {
                this.$message.error('请至少上传一个视频')
                return
            }
            const result = await addDispatch({
                serveCompanyId: Number(this.companyId),
                params: {
                    video: this.fileUrl
                }
            })
            console.log(result, 'result')
            this.centerDialogVisible = false
            await this.getPayrollList()
            this.$message.success('提交被派遣单位成功')
        },
        // 获取派遣单位视频
        onFileDetail (fileList:string[]) {
            this.videoList = fileList
            console.log(fileList, 'fileList')
            console.log('123456789')
        },
        // 关闭视频查看弹窗
        onVideoCallback () {
            this.videoList = []
            this.videoIndex = 0
        },
        // 查看上一个视频
        onVideoUpper () {
            // videoList: [] as string[],
            // videoIndex: 0
            if (this.videoIndex === 0) {
                return
            }
            this.videoIndex = this.videoIndex -= 1
        },
        // 查看下一个视频
        onVideoNext () {
            if (this.videoIndex === (this.videoList.length - 1)) {
                return
            }
            this.videoIndex = this.videoIndex += 1
        }
    }
})
</script>

  <style lang="stylus" scoped>
  table()
  .header.block {
    padding 20px
  }

  .basic
    margin-top 20px

  .value
    margin-right 30px

  .value.important
    color color-red
    font-style italic

  :deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px

  :deep().el-tabs__nav-scroll
    padding-right 20px

  .height-right
    float: right

  .download-btn
    width: 126px !important;

  .btn-red
    background: #FF7E68

  .el-tabs__header
    margin: 0

  .block-alone
    padding: 0 24px 0

  .decorate-box
    display flex
    align-items center

  .decorate
    width 6px
    height 6px
    border-radius 50%
    margin-right 5px

  .row
    margin-top 32px

    .name
      width 150px
      font-size 16px
      font-weight 500

  .upload-box
    display flex
    align-items flex-end

  .upload-introduce
    margin-left 16px
    color #1989FA

  .dialog-btn-box
    display flex
    align-items center
    justify-content center
    margin-top 40px
  .video-box
      display flex
      align-items center
      justify-content space-between
      padding 60px
  .video-i
      height 600px
      width 350px
  .video
      height 600px
      width 350px
  </style>
